<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">试题录入</div>
        <!-- form -->
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item label="学科：" prop="subjectID">
            <el-select
              style="width: 400px"
              v-model="formData.subjectID"
              placeholder="请选择"
              class="search-item"
              @change="getDirTagData"
            >
              <el-option
                v-for="item in select.subject"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="catalogID">
            <el-select
              style="width: 400px"
              v-model="formData.catalogID"
              placeholder="请选择"
              class="search-item"
            >
              <el-option
                v-for="item in select.twoDir"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select
              style="width: 400px"
              v-model="formData.enterpriseID"
              placeholder="请选择"
              class="search-item"
            >
              <el-option
                v-for="item in select.enterprise"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：" prop="province">
            <el-select
              style="width: 200px"
              v-model="formData.province"
              placeholder="请选择"
              class="search-item"
              @change="getAreaData"
              @visible-change="getCity"
            >
              <el-option
                v-for="item in select.city"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              style="width: 200px"
              v-model="formData.city"
              placeholder="请选择"
              class="search-item"
            >
              <el-option
                v-for="item in select.area"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向：" prop="direction">
            <el-select
              style="width: 400px"
              v-model="formData.direction"
              placeholder="请选择"
              class="search-item"
            >
              <el-option
                v-for="item in select.directionOp"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="questionType">
            <el-radio v-model="formData.questionType" label="1">单选</el-radio>
            <el-radio v-model="formData.questionType" label="2">多选</el-radio>
            <el-radio v-model="formData.questionType" label="3">简答</el-radio>
          </el-form-item>
          <el-form-item label="难度：" prop="difficulty">
            <el-radio v-model="formData.difficulty" label="1">简单</el-radio>
            <el-radio v-model="formData.difficulty" label="2">一般</el-radio>
            <el-radio v-model="formData.difficulty" label="3">困难</el-radio>
          </el-form-item>
          <el-form-item label="题干：" prop="question">
            <quillEditor v-model="formData.question"></quillEditor>
          </el-form-item>
          <el-form-item label="选项：">
            <el-radio-group v-model="formData.option.code">
              <div class="option-item">
                <el-radio :label="1" style="margin-right: 10px">A:</el-radio>
                <el-input
                  v-model="formData.option.title"
                  style="width: 240px"
                ></el-input>
              </div>
              <div class="option-item">
                <el-radio :label="2" style="margin-right: 10px">B:</el-radio>
                <el-input
                  v-model="formData.option.title"
                  style="width: 240px"
                ></el-input>
              </div>
              <div class="option-item">
                <el-radio :label="3" style="margin-right: 10px">C:</el-radio>
                <el-input
                  v-model="formData.option.title"
                  style="width: 240px"
                ></el-input>
              </div>
              <div class="option-item">
                <el-radio :label="4" style="margin-right: 10px">D:</el-radio>
                <el-input
                  v-model="formData.option.title"
                  style="width: 240px"
                ></el-input>
              </div>
            </el-radio-group>
            <div class="btn" style="margin-top: 30px">
              <el-button type="danger" size="small" style=""
                >增加选项与答案</el-button
              >
            </div>
          </el-form-item>
          <el-form-item label="解析视频：">
            <el-input
              v-model="formData.videoURL"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="答案解析：" prop="answer">
            <quillEditor v-model="formData.answer"></quillEditor>
          </el-form-item>
          <el-form-item label="题目备注：">
            <el-input
              type="textarea"
              v-model="formData.remarks"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题标签：">
            <el-input v-model="formData.tags" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { direction } from '@/api/hmmm/constants'
import { simple as subjectSimple } from '@/api/hmmm/subjects'
import { simple as directorySimple } from '@/api/hmmm/directorys'
import { list as getCompanyData } from '@/api/hmmm/companys'
import { provinces as city, citys as area } from '@/api/hmmm/citys.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  data () {
    return {
      formData: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        option: {
          code: null,
          title: '',
          img: '',
          isRight: ''
        },
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      select: {
        subject: [],
        twoDir: [],
        enterprise: [],
        directionOp: direction,
        creatorOp: [],
        city: [],
        area: []
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请输入题干内容', trigger: 'blur' }
        ],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getSubjectSimple()
    this.getCompany()
    this.init()
  },
  components: {
    quillEditor
  },
  methods: {
    init () {
      console.log(this.$route.params.form)
      this.$route.params.form && (this.formData = this._.cloneDeep(this.$route.params.form))
    },
    async submit () {
      try {
        await this.$refs.form.validate()
        this.$message.success('提交成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 获取搜索的条件
    async getSubjectSimple () {
      const { data } = await subjectSimple()
      this.select.subject = data
    },
    async getDirTagData (val) {
      const { data: twoDirData } = await directorySimple({ subjectID: val })
      this.select.twoDir = twoDirData
    },
    async getCompany () {
      const { data } = await getCompanyData({ pagesize: 100 })
      this.select.enterprise = data.items
    },
    getCity (val) {
      if (val) {
        this.getCityData()
      }
    },
    getCityData () {
      this.select.city = city()
    },
    getAreaData (e) {
      this.select.area = area(e)
      this.formData.city = this.select.area[0]
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-form-item {
  margin-bottom: 22px;
}
/deep/.el-form-item__label {
  width: 120px;
}
/deep/.el-form-item__content {
  margin-left: 120px;
}
/deep/.ql-editor {
  height: 200px;
}
.option-item {
  margin-top: 10px;
}
</style>
